<!-- 设置动态表单组件--中间表单预览 -->
<template>
  <div class="center">
    <a-form
      auto-label-width
      :model="copySetUpList"
      :layout="(layout as Tlayout)"
    >
      <draggable
        :list="copySetUpList"
        group="people"
        itemKey="controlName"
        class="draggable"
        @change="sorted"
        style="margin: 0 5px"
      >
        <template #item="{ element, index }">
          <div
            :class="
              choiceUuid === element.uuid ? 'center-item-choice' : 'center-item'
            "
            :style="{ width: element.span === 12 ? '50%' : '100%' }"
          >
            <div
              class="form-item"
              :class="element.isMust === 1 ? 'require' : ''"
              @click="removeAt(index)"
            >
              <div class="fill"></div>
            </div>
            <FormItem
              :name="element.name"
              :componentType="element.componentType"
              v-model:props="element.props"
              :required="element.required"
              :values="fakeValue"
            />
            <div class="mask" @click="emit('choiceComponent', element)" />
          </div>
        </template>
      </draggable>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue';
  import draggable from 'vuedraggable';
  import FormItem from '../../../rendering-form/form-item/index.vue';

  const emit = defineEmits(['choiceComponent', 'update:setUpList']);
  const fakeValue = ref(['']);

  const props = withDefaults(
    //参数说明
    defineProps<{
      setUpList: any[]; //tab显示的tab列表
      choiceUuid: string;
      layout: string;
    }>(),
    {}
  );
  const copySetUpList = computed(() => {
    return props.setUpList;
  });
  // 拖动排序
  const sorted = () => {
    copySetUpList.value.forEach((item, index) => {
      item.sort = index;
    });
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  const removeAt = (index: any) => {
    copySetUpList.value.splice(index, 1);
  };
</script>

<style lang="less" scoped>
  .center {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    overflow-x: hidden;
    box-shadow: 0 0 10px #ccc inset;
    padding: 16px;
    margin: 16px;
    .draggable {
      height: 600px;
      display: flex;
      justify-content: space-between;
      align-content: flex-start;
      flex-wrap: wrap;
    }

    &-item {
      position: relative;
      margin: 5px 0;
      // margin: 5px;
      // padding: 10px;
      border: #fff solid 1px;

      .form-item {
        display: flex;
        height: 20px;

        .fill {
          flex: 1;
        }
      }
      .form-item::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 15px solid skyblue;
        border-right: 15px solid transparent;
      }
      .require::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 15px solid rgb(136, 138, 139) !important;
        border-right: 15px solid transparent;
      }
    }

    .mask {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      cursor: pointer;
    }

    &-item-choice {
      position: relative;
      // padding: 10px;
      // border: rgb(73, 56, 148) solid 1px;
      .mask {
        // background: rgba(22, 93, 255, 0.2);
        border: #3296fa solid 1px;
      }
    }

    &-item-choice {
      .form-item {
        // pointer-events: none;
        display: flex;
        height: 20px;

        .fill {
          flex: 1;
        }
      }

      .form-item::after {
        z-index: 999;
        content: '\2716';
        width: 20px;
        height: 20px;
        text-align: center;
        color: #3296fa;
      }
      .require::after {
        z-index: 999;
        content: '';
        width: 20px;
        height: 20px;
        text-align: center;
        color: #3296fa;
      }
      .form-item::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 15px solid skyblue;
        border-right: 15px solid transparent;
      }
      .require::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 15px solid rgb(136, 138, 139) !important;
        border-right: 15px solid transparent;
      }
    }

    &-item:hover {
      border: #3296fa dashed 1px;

      .form-item {
        // pointer-events: none;
        display: flex;

        .fill {
          flex: 1;
        }
      }

      .form-item::after {
        z-index: 999;
        content: '\2716';
        width: 20px;
        height: 20px;
        text-align: center;
        color: #3296fa;
      }
      .require::after {
        z-index: 999;
        content: '';
        width: 20px;
        height: 20px;
        text-align: center;
        color: #3296fa;
      }
    }
  }

  .center::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
</style>
